<template>
  <div>
    <!-- <ElementTest></ElementTest> -->

    <!-- KForm -->
    <KForm :model="userInfo" :rules="rules" ref="loginForm">
      <!-- 用户名 -->
      <KFormItem label="用户名" prop="username">
        <KInput v-model="userInfo.username" placeholder="请输入用户名"></KInput>
      </KFormItem>
      <!-- 密码 -->
      <KFormItem label="密码" prop="password">
        <KInput
          type="password"
          v-model="userInfo.password"
          placeholder="请输入用户名"
        ></KInput>
      </KFormItem>
      <!-- 提交按钮 -->
      <!-- 点击并检测是否有错误有错误则不提交 -->
      <KFormItem>
        <button @click="login">登录</button>
      </KFormItem>
    </KForm>
  </div>
</template>

<script>
import ElementTest from '@/components/form/ElementTest.vue'
import KInput from '@/components/form/KInput.vue'
import KFormItem from '@/components/form/KFormItem.vue'
import KForm from '@/components/form/KForm.vue'
// import Notice from '@/components/Notice.vue'

export default {
  data() {
    return {
      userInfo: {
        // 默认值
        username: 'tom',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名称' }],
        password: [{ required: true, message: '请输入密码' }]
      }
    }
  },
  components: {
    ElementTest,
    KInput,
    KFormItem,
    KForm
  },
  methods: {
    login() {
      this.$refs['loginForm'].validate(valid => {
        const notice = this.$notice({
          title: '社会你杨哥喊你来搬砖',
          message: valid ? '请求登录!' : '校验失败!',
          duration: 2000
        })
        notice.show()
        // if (valid) {
        //   alert("submit");
        // } else {
        //   console.log("error submit!");
        //   return false;
        // }
      })
    }
  }
}
</script>

<style scoped></style>
